<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <!-- 选项 -->
      <div class="position-relative">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <router-link class="nav-link" :to="'/profile/' + id">个人信息</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" :to="'/profile/' + id + '/post'">我的帖子</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="'/profile/' + id + '/reply'">我的回复</router-link>
          </li>
        </ul>
        <router-link class="text-muted position-absolute rt-0" :to="'/profile/' + id">返回个人主页&gt;</router-link>
      </div>
      <!-- 我的帖子 -->
      <div class="mt-4">
        <h6><b class="square"></b> 发布的帖子({{ total }})</h6>
        <ul class="list-unstyled mt-4 pl-3 pr-3">
          <li class="border-bottom pb-3 mt-4" v-for="discussPost in discussPosts" :key="discussPost.post.id">
            <div class="font-size-16 text-info">
              <router-link :to="'/discuss/detail/' + discussPost.post.id" class="text-info">{{ discussPost.post.title }}</router-link>
            </div>
            <div class="mt-1 font-size-14">
              {{ discussPost.post.content }}
            </div>
            <div class="text-right font-size-12 text-muted">
              <b v-if="discussPost.like?.status == 1">已</b>赞 <i v-if="discussPost.like" class="mr-3">{{ discussPost.like.count }}</i>
              发布于 <b>{{ discussPost.post.createTime }}</b>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <div class="mt-5" v-if="discussPosts.length > 0">
          <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import DiscussPost from '@/api/discussPost'
import Like from '@/api/like'

const userStore = useUserStore()

const route = useRoute()

const id = ref(0)

const discussPosts = ref([])

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const total = ref(10)
const pageSizes = ref([10, 20, 50, 100])
const currentPage = ref(1)
const pageSize = ref(10)

onMounted(async () => {
  // 用户id
  id.value = route.params.id
  getDiscussPostsById()
})

const getDiscussPostsById = async () => {
  DiscussPost.getDiscussPostsById(id.value, currentPage.value, pageSize.value)
  .then(res => {
    getTotal()
    discussPosts.value = res
    for (let i in discussPosts.value) {
      discussPosts.value[i].like = {
        count: 0,
        status: 0
      }
      getLikeCount(discussPosts.value[i].post.id)
      getLikeStatus(discussPosts.value[i].post.id)
    }
  })
}

const getTotal = async () => {
  DiscussPost.getDiscussPostCount(id.value).then(res => {
    total.value = res
  })
}

const getLikeCount = async (entityId) => {
  Like.getLikeCount(1, entityId)
  .then(async res => {
    // 刷新状态
    for (let i in discussPosts.value) {
      if (entityId == discussPosts.value[i].post.id) {
        discussPosts.value[i].like.count = res
        break
      }
    }
  })
}

const getLikeStatus = async (entityId) => {
  Like.getLikeStatus(1, entityId)
  .then(async res => {
    // 刷新状态
    for (let i in discussPosts.value) {
      if (entityId == discussPosts.value[i].post.id) {
        discussPosts.value[i].like.status = res
        break
      }
    }
  })
}

const handleSizeChange = async () => {
  getDiscussPostsById()
}

const handleCurrentChange = async () => {
  getDiscussPostsById()
}
</script>
